<template>
  <view class="search-container">
    <view class="search-input-container">
      <view class="input-container">
        <wd-input
            type="text"
            custom-class="custom-search-input-class"
            v-model="searchValue"
            :placeholder="props.inputPlaceHolder"
            :no-border="true"
        />
      </view>
      <view class="search-btn-container">
        <wd-icon name="search" size="22px" color="#ffffff" @click="handleSearch"></wd-icon>
      </view>
    </view>
    <SearchResultItem
        v-if="searchResultList && searchResultList.length > 0"
        v-for="(item,index) in searchResultList"
        :key="index"
        :resultItem="item"
    ></SearchResultItem>
    <wd-status-tip
        v-else
        :image-size="{
          height: 200,
          width: 300
        }"
        image="search"
        tip="当前搜索无结果"
    />
  </view>
</template>

<script setup>
    import {watch} from "vue";
    import SearchResultItem from "@/components/Search/searchResultItem.vue";
    const props = defineProps({
      inputPlaceHolder: {
        type: String,
        default: "九寨沟"
      },
      searchValue: {
        type: String,
        default: ""
      },
      searchResultList: {
        type: Array,
        default: []
      }
    });
    const emits = defineEmits(["handleSearch"]);

    const searchValue = ref("");

    watch((props),(value) => {
      let {searchValue:_searchValue} = props;
      if(!searchValue.value) {
        searchValue.value = _searchValue;
      }
    },{immediate:true,deep:true});

    const handleSearch = () => {
      emits("handleSearch",searchValue.value)
    };

</script>

<style lang="scss" scoped>
  .search-container {
    width: 100%;
    .search-input-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      width: 100%;
      height: 69rpx;
      margin-bottom: 20rpx;
      border-radius: 34rpx;
      overflow: hidden;
      background-color: #ffffff;
      border: 2rpx solid #508963;
      box-shadow: -3rpx -1rpx 5rpx 0rpx rgba(0,0,0,0.17);
      .input-container{
        flex: 1;
        padding-left:40rpx;
        :deep(.custom-search-input-class) {
          background: #ffffff;
          height: 69rpx;
          width: 100%;
          .wd-input__body {
            height: 69rpx;
            .wd-input__value{
              height: 100%;
              padding-left: 20rpx;
            }
          }
        }
      }
      .search-btn-container{
        width: 130rpx;
        border-top-left-radius: 35rpx;
        border-bottom-left-radius: 35rpx;
        text-align: center;
        background: #508963;
        height: 69rpx;
        line-height: 69rpx;
      }
    }
  }
</style>
